<!DOCTYPE html>
<html class="client-nojs vector-feature-night-mode-disabled vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-sticky-header-enabled" lang="en" dir="ltr"><head>
<meta charset="UTF-8">
<title>CSS box model</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="https://en.wikipedia.org/wiki/CSS_box_model"> <link href="./mw/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/ext.pygments.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/skins.vector.styles.css" rel="stylesheet" type="text/css">
<link href="./mw/user.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link rel="stylesheet" type="text/css" href="./mw/site.styles.css">
<link rel="stylesheet" type="text/css" href="./mw/noscript.css">
<link rel="stylesheet" type="text/css" href="./footer.css">
<link rel="stylesheet" type="text/css" href="./vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-CSS_box_model rootpage-CSS_box_model skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading">
<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">CSS box model</span></span>
</h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr">
<p class="mw-empty-elt">
</p>
<style data-mw-deduplicate="TemplateStyles:r1305433154">
/* start https://en.wikipedia.org/ */
.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}
/* end https://en.wikipedia.org/ */
</style><style data-mw-deduplicate="TemplateStyles:r1248332772">
/* start https://en.wikipedia.org/ */
.mw-parser-output .multiple-issues-text{width:95%;margin:0.2em 0}.mw-parser-output .multiple-issues-text>.mw-collapsible-content{margin-top:0.3em}.mw-parser-output .compact-ambox .ambox{border:none;border-collapse:collapse;background-color:transparent;margin:0 0 0 1.6em!important;padding:0!important;width:auto;display:block}body.mediawiki .mw-parser-output .compact-ambox .ambox.mbox-small-left{font-size:100%;width:auto;margin:0}.mw-parser-output .compact-ambox .ambox .mbox-text{padding:0!important;margin:0!important}.mw-parser-output .compact-ambox .ambox .mbox-text-span{display:list-item;line-height:1.5em;list-style-type:disc}body.skin-minerva .mw-parser-output .multiple-issues-text>.mw-collapsible-toggle,.mw-parser-output .compact-ambox .ambox .mbox-image,.mw-parser-output .compact-ambox .ambox .mbox-imageright,.mw-parser-output .compact-ambox .ambox .mbox-empty-cell,.mw-parser-output .compact-ambox .hide-when-compact{display:none}
/* end https://en.wikipedia.org/ */
</style>
<style data-mw-deduplicate="TemplateStyles:r1295905060">
/* start https://en.wikipedia.org/ */
.mw-parser-output .infobox-subbox{padding:0;border:none;margin:-3px;width:auto;min-width:100%;font-size:100%;clear:none;float:none;background-color:transparent}.mw-parser-output .infobox-3cols-child{margin:auto}.mw-parser-output .infobox .navbar{font-size:100%}@media screen{html.skin-theme-clientpref-night .mw-parser-output .infobox-full-data:not(.notheme)>div:not(.notheme)[style]{background:#1f1f23!important;color:#f8f9fa}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .infobox-full-data:not(.notheme)>div:not(.notheme)[style]{background:#1f1f23!important;color:#f8f9fa}}@media(min-width:640px){body.skin--responsive .mw-parser-output .infobox-table{display:table!important}body.skin--responsive .mw-parser-output .infobox-table>caption{display:table-caption!important}body.skin--responsive .mw-parser-output .infobox-table>tbody{display:table-row-group}body.skin--responsive .mw-parser-output .infobox-table th,body.skin--responsive .mw-parser-output .infobox-table td{padding-left:inherit;padding-right:inherit}}
/* end https://en.wikipedia.org/ */
</style><table class="infobox hproduct"><caption class="infobox-title fn">Box Model</caption><tbody><tr><td colspan="2" class="infobox-subheader">CSS Box Model Module Level 3</td></tr><tr><td colspan="2" class="infobox-image"><div class="infobox-caption">The CSS box model</div></td></tr><tr><th scope="row" class="infobox-label">Native name</th><td class="infobox-data"><div class="nickname" lang="en">CSS Box Model Module Level 3</div></td></tr><tr><th scope="row" class="infobox-label">Status</th><td class="infobox-data">W3C Candidate Recommendation Snapshot</td></tr><tr><th scope="row" class="infobox-label">Latest version</th><td class="infobox-data">Level 3<br>December 22, 2020<span style="display: none;"> (<span class="bday dtstart published updated itvstart">2020-12-22</span>)</span><sup id="cite_ref-w3c-level-3_1-0" class="reference"><a href="#cite_note-w3c-level-3-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></td></tr><tr><th scope="row" class="infobox-label">Organization</th><td class="infobox-data"><a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a></td></tr><tr><th scope="row" class="infobox-label">Committee</th><td class="infobox-data">CSS Working Group</td></tr><tr><th scope="row" class="infobox-label">Editors</th><td class="infobox-data"><style data-mw-deduplicate="TemplateStyles:r1126788409">
/* start https://en.wikipedia.org/ */
.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}
/* end https://en.wikipedia.org/ */
</style><div class="plainlist">
<ul><li>Elika J. Etemad<sup id="cite_ref-w3c-level-3_1-1" class="reference"><a href="#cite_note-w3c-level-3-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li>
<li>Bert Bos<sup id="cite_ref-w3c-level-3-draft-2018-07-06_2-0" class="reference"><a href="#cite_note-w3c-level-3-draft-2018-07-06-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></li>
<li>Anton Prowse<sup id="cite_ref-w3c-level-3-draft-2018-07-06_2-1" class="reference"><a href="#cite_note-w3c-level-3-draft-2018-07-06-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></li></ul>
</div></td></tr><tr><th scope="row" class="infobox-label">Base standards</th><td class="infobox-data"><a href="CSS" title="CSS">CSS</a></td></tr><tr><th scope="row" class="infobox-label">Domain</th><td class="infobox-data"><a href="CSS" title="CSS">CSS</a></td></tr><tr><th scope="row" class="infobox-label">Website</th><td class="infobox-data"><span class="url"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/css-box-3/">www<wbr>.w3<wbr>.org<wbr>/TR<wbr>/css-box-3<wbr>/</a></span></td></tr></tbody></table>
<style data-mw-deduplicate="TemplateStyles:r1129693374">
/* start https://en.wikipedia.org/ */
.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}
/* end https://en.wikipedia.org/ */
</style><style data-mw-deduplicate="TemplateStyles:r1246091330">
/* start https://en.wikipedia.org/ */
.mw-parser-output .sidebar{width:22em;float:right;clear:right;margin:0.5em 0 1em 1em;background:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);padding:0.2em;text-align:center;line-height:1.4em;font-size:88%;border-collapse:collapse;display:table}body.skin-minerva .mw-parser-output .sidebar{display:table!important;float:right!important;margin:0.5em 0 1em 1em!important}.mw-parser-output .sidebar-subgroup{width:100%;margin:0;border-spacing:0}.mw-parser-output .sidebar-left{float:left;clear:left;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-none{float:none;clear:both;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-outer-title{padding:0 0.4em 0.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .sidebar-top-image{padding:0.4em}.mw-parser-output .sidebar-top-caption,.mw-parser-output .sidebar-pretitle-with-top-image,.mw-parser-output .sidebar-caption{padding:0.2em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-pretitle{padding:0.4em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-title,.mw-parser-output .sidebar-title-with-pretitle{padding:0.2em 0.8em;font-size:145%;line-height:1.2em}.mw-parser-output .sidebar-title-with-pretitle{padding:0.1em 0.4em}.mw-parser-output .sidebar-image{padding:0.2em 0.4em 0.4em}.mw-parser-output .sidebar-heading{padding:0.1em 0.4em}.mw-parser-output .sidebar-content{padding:0 0.5em 0.4em}.mw-parser-output .sidebar-content-with-subgroup{padding:0.1em 0.4em 0.2em}.mw-parser-output .sidebar-above,.mw-parser-output .sidebar-below{padding:0.3em 0.8em;font-weight:bold}.mw-parser-output .sidebar-collapse .sidebar-above,.mw-parser-output .sidebar-collapse .sidebar-below{border-top:1px solid #aaa;border-bottom:1px solid #aaa}.mw-parser-output .sidebar-navbar{text-align:right;font-size:115%;padding:0 0.4em 0.4em}.mw-parser-output .sidebar-list-title{padding:0 0.4em;text-align:left;font-weight:bold;line-height:1.6em;font-size:105%}.mw-parser-output .sidebar-list-title-c{padding:0 0.4em;text-align:center;margin:0 3.3em}@media(max-width:640px){body.mediawiki .mw-parser-output .sidebar{width:100%!important;clear:both;float:none!important;margin-left:0!important;margin-right:0!important}}body.skin--responsive .mw-parser-output .sidebar a>img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media print{body.ns-0 .mw-parser-output .sidebar{display:none!important}}
/* end https://en.wikipedia.org/ */
</style><style data-mw-deduplicate="TemplateStyles:r1239334494">
/* start https://en.wikipedia.org/ */
@media screen{html.skin-theme-clientpref-night .mw-parser-output div:not(.notheme)>.tmp-color,html.skin-theme-clientpref-night .mw-parser-output p>.tmp-color,html.skin-theme-clientpref-night .mw-parser-output table:not(.notheme) .tmp-color{color:inherit!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output div:not(.notheme)>.tmp-color,html.skin-theme-clientpref-os .mw-parser-output p>.tmp-color,html.skin-theme-clientpref-os .mw-parser-output table:not(.notheme) .tmp-color{color:inherit!important}}
/* end https://en.wikipedia.org/ */
</style><table class="sidebar nomobile nowraplinks"><tbody><tr><th class="sidebar-title" style="background:rgba(51,51,255,0.24);display:block;margin-bottom:0.25em; color: inherit;"><a href="Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a></th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">
<ul><li><a href="Style_sheet_(web_development)" title="Style sheet (web development)">Style sheet</a></li>
<li><a href="CSS_Zen_Garden" title="CSS Zen Garden">CSS Zen Garden</a></li></ul></td>
</tr><tr><th class="sidebar-heading" style="background:rgba(51,51,255,0.16); color: inherit;">
Concepts</th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">
<ul><li><a href="CSS_animations" title="CSS animations">Animations</a></li>
<li><a href="Flexbox" title="Flexbox">Flexbox</a></li>
<li><a href="CSS_grid_layout" title="CSS grid layout">Grid</a></li>
<li><a href="CSS_image_replacement" title="CSS image replacement">Image replacement</a></li></ul></td>
</tr><tr><th class="sidebar-heading" style="background:rgba(51,51,255,0.16); color: inherit;">
Philosophies</th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">
<ul><li><a href="Tableless_web_design" title="Tableless web design">Tableless</a></li>
<li><a href="Responsive_web_design" title="Responsive web design">Responsive</a></li>
<li><a href="Holy_grail_(web_design)" title="Holy grail (web design)">"Holy grail"</a></li></ul></td>
</tr><tr><th class="sidebar-heading" style="background:rgba(51,51,255,0.16); color: inherit;">
Tools</th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">
<ul><li><a href="Sass_(stylesheet_language)" class="mw-redirect" title="Sass (stylesheet language)">Sass</a></li>
<li><a href="Less_(stylesheet_language)" class="mw-redirect" title="Less (stylesheet language)">Less</a></li>
<li><a href="Stylus_(stylesheet_language)" class="mw-redirect" title="Stylus (stylesheet language)">Stylus</a></li></ul></td>
</tr><tr><th class="sidebar-heading" style="background:rgba(51,51,255,0.16); color: inherit;">
Comparisons</th></tr><tr><td class="sidebar-content hlist" style="padding-top:0.2em;padding-bottom:0.7em;">
<ul><li><a href="Comparison_of_stylesheet_languages" title="Comparison of stylesheet languages">Stylesheet languages</a></li></ul></td>
</tr><tr><td class="sidebar-below plainlist" style="background:rgba(51,51,255,0.16); display:block;margin-top:0.4em;color:inherit;">
<ul><li><span class="noviewer" typeof="mw:File"></span> <a href="https://en.wikibooks.org/wiki/Cascading_Style_Sheets" class="extiw external" title="b:Cascading Style Sheets"><span class="tmp-color" style="color:#002bb8">Cascading Style Sheets</span></a></li></ul></td></tr><tr><td class="sidebar-navbar"><style data-mw-deduplicate="TemplateStyles:r1239400231">
/* start https://en.wikipedia.org/ */
.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}
/* end https://en.wikipedia.org/ */
</style></td></tr></tbody></table>
<p>In <a href="Web_development" title="Web development">web development</a>, the <b>CSS box model</b> refers to how HTML elements are modeled in <a href="Browser_engine" title="Browser engine">browser engines</a> and how the dimensions of those HTML elements are derived from <a href="CSS" title="CSS">CSS</a> properties. It is a fundamental concept for the composition of <a href="HTML" title="HTML">HTML</a> webpages.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> The guidelines of the box model are described by web standards <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium (W3C)</a> specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of <a href="CSS#CSS_2" title="CSS">CSS2</a> in 1998, which introduced the <code>box-sizing</code> property, the problem had mostly been resolved.
</p>
<meta property="mw:PageProp/toc">
<div class="mw-heading mw-heading2"><h2 id="Specifics">Specifics</h2></div>
<p>The Cascading Style Sheets (CSS) specification describes how elements of <a href="Web_page" title="Web page">web pages</a> are displayed by graphical browsers. Section 4 of the CSS1 specification defines a "formatting model" that gives block-level elements—such as <code>p</code> and <code>blockquote</code>—a width and height, and three levels of boxes surrounding it: padding, borders, and margins.<sup id="cite_ref-CSS-19990111_4-0" class="reference"><a href="#cite_note-CSS-19990111-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> While the specification never uses the term "box model" explicitly, the term has become widely used by web developers and web browser vendors.
</p><p>All HTML elements can be considered "boxes", this includes <code>div</code> tag, <code>p</code> tag, or <code>a</code> tag. Each of those boxes has five modifiable dimensions:
</p>
<dl><dd><ul><li>the <code>height</code> and <code>width</code> describe dimensions of the actual content of the box (text, images, ...)</li>
<li>the <code>padding</code> describes the space between this content and the border of the box</li>
<li>the <code>border</code> is any kind of line (solid, dotted, dashed...) surrounding the box, if present</li>
<li>the <code>margin</code> is the space around the border</li></ul></dd></dl>
<p>According to the CSS1 specification, released by W3C in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward.<sup id="cite_ref-CSS-19990111_4-1" class="reference"><a href="#cite_note-CSS-19990111-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> Before CSS3, this box model was known as <b>W3C box model</b>, in CSS3, it is known as the <code>content-box</code>.
</p><p>The total width of a box is therefore <code>left-margin</code> + <code>left-border</code> + <code>left-padding</code> + <code>width</code> + <code>right-padding</code> + <code>right-border</code> + <code>right-margin</code>. Similarly, the total height of a box equals <code>top-margin</code> + <code>top-border</code> + <code>top-padding</code> + <code>height</code> + <code>bottom-padding</code> + <code>bottom-border</code> + <code>bottom-margin</code>.
</p><p>For example, the following CSS code
</p>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span class="p">.</span><span class="nc">myClass</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
<span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">px</span><span class="p">;</span>
<span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="w"> </span><span class="kc">black</span><span class="p">;</span>
<span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
<p>would specify the box dimensions of each block belonging to 'myClass'. Moreover, each such box will have total height 160<a href="Pixel" title="Pixel">px</a> and width 260px.
</p><p>CSS3 introduced the <b>Internet Explorer box model</b> to the standard, known referred to as <code>border-box</code>.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="History">History</h2></div>
<p>Before HTML 4 and CSS, very few HTML elements supported both border and padding, so the definition of the width and height of an element was not very contentious. However, it varied depending on the element. The HTML width attribute of a table defined the width of the table including its border.<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> On the other hand, the HTML width attribute of an image defined the width of the image itself (inside any border).<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> The only element to support padding in those early days was the table cell. Width for the cell was defined as "the suggested width for a cell content in pixels excluding the cell padding."<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup>
</p><p>In 1996, CSS<sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup> introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup> This has since become known as the <i>W3C box model</i>.
</p><p>At the time, very few browser vendors implemented the W3C box model to the letter. The two major browsers at the time, <a href="Netscape_Communicator" title="Netscape Communicator">Netscape 4.0</a> and <a href="Internet_Explorer_4" title="Internet Explorer 4">Internet Explorer 4.0</a> both defined width and height as the distance from border to border.<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> This has been referred to as the <i>traditional</i><sup id="cite_ref-CSS2_-_Box_model_tweaking_13-0" class="reference"><a href="#cite_note-CSS2_-_Box_model_tweaking-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup> or the <i>Internet Explorer box model</i>.<sup id="cite_ref-RJ1_14-0" class="reference"><a href="#cite_note-RJ1-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup>
</p><p><a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> in "<a href="Quirks_mode" title="Quirks mode">quirks mode</a>" includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box than would result following the standard behavior.<sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup>
</p><p>The <i>Internet Explorer box model</i> behavior was often considered a bug, because of the way in which earlier versions of <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> handle the box model or sizing of elements in a web page, which differs from the standard way recommended by the <a href="W3C" class="mw-redirect" title="W3C">W3C</a> for the <a href="Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a> language.<sup id="cite_ref-16" class="reference"><a href="#cite_note-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-17" class="reference"><a href="#cite_note-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup> As of <a href="Internet_Explorer_6" title="Internet Explorer 6">Internet Explorer 6</a>, the browser supports an alternative rendering mode (called the "standards-compliant mode") which solves this discrepancy. However, for backward compatibility reasons, all versions still behave in the usual, non-standard way by default (see <a href="Quirks_mode" title="Quirks mode">quirks mode</a>). <a href="Internet_Explorer_for_Mac" title="Internet Explorer for Mac">Internet Explorer for Mac</a> is not affected by this non-standard behavior.
</p>
<div class="mw-heading mw-heading3"><h3 id="Workarounds">Workarounds</h3></div>
<p>Internet Explorer versions <a href="Internet_Explorer_6" title="Internet Explorer 6">6</a> and onward are not affected by the bug if the page contains certain <a href="HTML" title="HTML">HTML</a> <a href="Document_type_declaration" title="Document type declaration">document type declarations</a>. These versions maintain the buggy behavior when in <a href="Quirks_mode" title="Quirks mode">quirks mode</a> for reasons of backward compatibility.<sup id="cite_ref-msdn_IE7_blog_18-0" class="reference"><a href="#cite_note-msdn_IE7_blog-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> For example, quirks mode is triggered:
</p>
<ul><li>When the <a href="Document_Type_Declaration" class="mw-redirect" title="Document Type Declaration">document type declaration</a> is absent or incomplete;</li>
<li>When an HTML 3 or earlier document is encountered;</li>
<li>When an HTML 4.0 Transitional or Frameset document type declaration is used and a system identifier (URI) is not present;</li>
<li>When an SGML comment or other unrecognized content appears before the document type declaration</li>
<li>Internet Explorer 6 also uses quirks mode if there is an <a href="XML" title="XML">XML</a> declaration prior to the document type declaration.<sup id="cite_ref-19" class="reference"><a href="#cite_note-19"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup></li></ul>
<p>Various workarounds have been devised to force Internet Explorer versions 5 and earlier to display Web pages using the W3C box model. These workarounds generally exploit unrelated bugs in Internet Explorer's CSS selector processing in order to hide certain rules from the browser. The best known of these workarounds is the "box model hack" developed by <a href="Tantek_%C3%87elik" title="Tantek Çelik">Tantek Çelik</a>, a former Microsoft employee who developed this idea while working on Internet Explorer for the Macintosh. It involves specifying a width declaration for Internet Explorer for Windows, and then overriding it with another width declaration for CSS-compliant browsers. This second declaration is hidden from Internet Explorer for Windows by exploiting other bugs in the way that it parses CSS rules. The implementation of these CSS "hacks" has been further complicated by the public release of Internet Explorer 7, which has had some issues fixed, but not others, causing undesired results in pages using these hacks.<sup id="cite_ref-msdn_IE7_blog_18-1" class="reference"><a href="#cite_note-msdn_IE7_blog-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup>
</p><p>Box model hacks have proven unreliable because they rely on bugs in browsers' CSS support that may be fixed in later versions. For this reason, some Web developers have instead recommended either avoiding specifying both width and padding for the same element or using conditional comment and/or <a href="CSS_hack" title="CSS hack">CSS filters</a> to work around the box model bug in older versions of Internet Explorer.<sup id="cite_ref-RJ1_14-1" class="reference"><a href="#cite_note-RJ1-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-20" class="reference"><a href="#cite_note-20"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="Support_for_Internet_Explorer's_box_model">Support for Internet Explorer's box model</h2></div>
<p>Web designer Doug Bowman has said that the original Internet Explorer box model represents a better, more logical approach.<sup id="cite_ref-21" class="reference"><a href="#cite_note-21"><span class="cite-bracket">[</span>21<span class="cite-bracket">]</span></a></sup> Peter-Paul Koch gives the example of a physical box, whose dimensions always refer to the box itself, including potential padding, but never its content.<sup id="cite_ref-CSS2_-_Box_model_tweaking_13-1" class="reference"><a href="#cite_note-CSS2_-_Box_model_tweaking-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup> He says that this box model is more useful for graphic designers, who create designs based on the visible width of boxes rather than the width of their content.<sup id="cite_ref-22" class="reference"><a href="#cite_note-22"><span class="cite-bracket">[</span>22<span class="cite-bracket">]</span></a></sup> Bernie Zimmermann says that the Internet Explorer box model is closer to the definition of cell dimensions and padding used in the HTML table model.<sup id="cite_ref-23" class="reference"><a href="#cite_note-23"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup>
</p><p>The W3C has included a "box-sizing" property in CSS3. When <code>box-sizing: border-box;</code> is specified for an element, any padding or border of the element is drawn <i>inside</i> the specified width and height, "as commonly implemented by legacy HTML user agents".<sup id="cite_ref-24" class="reference"><a href="#cite_note-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> <a href="Internet_Explorer_8" title="Internet Explorer 8">Internet Explorer 8</a>, <a href="WebKit" title="WebKit">WebKit</a> browsers such as <a href="Safari_(web_browser)" title="Safari (web browser)">Apple Safari</a> 5.1+ and <a href="Google_Chrome" title="Google Chrome">Google Chrome</a>, <a href="Gecko_(layout_engine)" class="mw-redirect" title="Gecko (layout engine)">Gecko-based</a> browsers such as <a href="Mozilla_Firefox" class="mw-redirect" title="Mozilla Firefox">Mozilla Firefox</a> 29.0 and later, <a href="Opera_(web_browser)" title="Opera (web browser)">Opera</a> 7.0 and later, and <a href="Konqueror" title="Konqueror">Konqueror</a> 3.3.2 and later support the CSS3 box-sizing property. Gecko browsers previous than 29.0 support the same functionality using the browser-specific <code>-moz-box-sizing</code> property.<sup id="cite_ref-25" class="reference"><a href="#cite_note-25"><span class="cite-bracket">[</span>25<span class="cite-bracket">]</span></a></sup> <code>border-box</code> is the default box model used in <a href="Bootstrap_(front-end_framework)" title="Bootstrap (front-end framework)">Bootstrap framework</a>.
</p>
<div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2></div>
<ul><li><a href="Layout_(computing)" title="Layout (computing)">Layout (computing)</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>
<style data-mw-deduplicate="TemplateStyles:r1239543626">
/* start https://en.wikipedia.org/ */
.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}
/* end https://en.wikipedia.org/ */
</style><div class="reflist">
<div class="mw-references-wrap mw-references-columns"><ol class="references">
<li id="cite_note-w3c-level-3-1"><span class="mw-cite-backlink">^ <a href="#cite_ref-w3c-level-3_1-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-w3c-level-3_1-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">
/* start https://en.wikipedia.org/ */
.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}
/* end https://en.wikipedia.org/ */
</style><cite id="CITEREFEtemad2020" class="citation web cs1">Etemad, Elika J., ed. (22 December 2020). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/css-box-3/">"CSS Box Model Module Level 3"</a>. <i>W3C</i>. Level 3. CSS Working Group<span class="reference-accessdate">. Retrieved <span class="nowrap">9 April</span> 2021</span>.</cite></span>
</li>
<li id="cite_note-w3c-level-3-draft-2018-07-06-2"><span class="mw-cite-backlink">^ <a href="#cite_ref-w3c-level-3-draft-2018-07-06_2-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-w3c-level-3-draft-2018-07-06_2-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite id="CITEREFBosProwse2018" class="citation web cs1">Bos, Bert; Prowse, Anton, eds. (6 July 2018). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/2018/WD-css3-box-20180731/">"CSS Basic Box Model Level 3"</a>. <i>W3C</i>. 31 July 2018. CSS Working Group<span class="reference-accessdate">. Retrieved <span class="nowrap">9 April</span> 2021</span>.</cite></span>
</li>
<li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">"CSS"</a>. <i>MDN Web Docs</i>. 23 March 2019<span class="reference-accessdate">. Retrieved <span class="nowrap">30 March</span> 2019</span>.</cite></span>
</li>
<li id="cite_note-CSS-19990111-4"><span class="mw-cite-backlink">^ <a href="#cite_ref-CSS-19990111_4-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-CSS-19990111_4-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite id="CITEREFWium_LieBos1999" class="citation web cs1"><a href="H%C3%A5kon_Wium_Lie" title="Håkon Wium Lie">Wium Lie, Håkon</a>; <a href="Bert_Bos" title="Bert Bos">Bos, Bert</a> (11 January 1999). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/1999/REC-CSS1-19990111#formatting-model">"Cascading Style Sheets, level 1 § Formatting model"</a>. <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a><span class="reference-accessdate">. Retrieved <span class="nowrap">26 October</span> 2017</span>.</cite></span>
</li>
<li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><cite id="CITEREFHåkon_Wium_LieBert_Bos1996" class="citation web cs1"><a href="H%C3%A5kon_Wium_Lie" title="Håkon Wium Lie">Håkon Wium Lie</a>; <a href="Bert_Bos" title="Bert Bos">Bert Bos</a> (17 December 1996). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/REC-CSS1-961217#formatting-model">"Cascading Style Sheets, level 1"</a>. <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a><span class="reference-accessdate">. Retrieved <span class="nowrap">9 December</span> 2006</span>.</cite></span>
</li>
<li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><cite id="CITEREFPeter-Paul_Koch2013" class="citation web cs1">Peter-Paul Koch (2013). <a rel="nofollow" class="external text" href="https://quirksmode.org/css/user-interface/boxsizing.html">"CSS – box-sizing"</a>. <i>quirksmode.org</i><span class="reference-accessdate">. Retrieved <span class="nowrap">30 March</span> 2019</span>.</cite></span>
</li>
<li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><cite id="CITEREFRaggett1996" class="citation web cs1"><a href="Dave_Raggett" title="Dave Raggett">Raggett, Dave</a> (23 January 1996). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/WD-tables-960123">"The HTML3 Table Model"</a>. <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a><span class="reference-accessdate">. Retrieved <span class="nowrap">26 October</span> 2017</span>.</cite><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.ietf.org/rfc/rfc1942.txt">"RFC 1942 HTML Tables"</a>. <a href="IETF" class="mw-redirect" title="IETF">IETF</a>. <q>The default table width is the space between the current left and right margins.</q></cite></span>
</li>
<li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><cite id="CITEREFRaggettLe_HorsJacobs1999" class="citation web cs1">Raggett, Dave; Le Hors, Arnaud; Jacobs, Ian (24 December 1999). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.7.1">"13 Objects, Images, and Applets § Width and height"</a>. <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a><span class="reference-accessdate">. Retrieved <span class="nowrap">26 October</span> 2017</span>.</cite></span>
</li>
<li id="cite_note-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-9">^</a></b></span> <span class="reference-text"><cite id="CITEREFRaggett1997" class="citation web cs1"><a href="Dave_Raggett" title="Dave Raggett">Raggett, Dave</a> (14 January 1997). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/REC-html32">"HTML 3.2 Reference Specification"</a>. <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a><span class="reference-accessdate">. Retrieved <span class="nowrap">26 October</span> 2017</span>.</cite></span>
</li>
<li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><cite id="CITEREFWium_LieBos1996" class="citation web cs1"><a href="H%C3%A5kon_Wium_Lie" title="Håkon Wium Lie">Wium Lie, Håkon</a>; <a href="Bert_Bos" title="Bert Bos">Bos, Bert</a> (17 December 1996). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/CSS1/">"Cascading Style Sheets, level 1"</a>. <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a><span class="reference-accessdate">. Retrieved <span class="nowrap">26 October</span> 2017</span>.</cite></span>
</li>
<li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><cite id="CITEREFWium_LieBos1996" class="citation web cs1"><a href="H%C3%A5kon_Wium_Lie" title="Håkon Wium Lie">Wium Lie, Håkon</a>; <a href="Bert_Bos" title="Bert Bos">Bos, Bert</a> (17 December 1996). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/REC-CSS1-961217">"Cascading Style Sheets, level 1"</a>. <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a><span class="reference-accessdate">. Retrieved <span class="nowrap">26 October</span> 2017</span>.</cite></span>
</li>
<li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text"><cite id="CITEREFKoch" class="citation web cs1">Koch, Peter-Paul. <a rel="nofollow" class="external text" href="https://ppk.home.xs4all.nl/css2tests/box.html">"Box model tweaking"</a>. <a href="XS4ALL" title="XS4ALL">XS4ALL</a><span class="reference-accessdate">. Retrieved <span class="nowrap">26 October</span> 2017</span>.</cite></span>
</li>
<li id="cite_note-CSS2_-_Box_model_tweaking-13"><span class="mw-cite-backlink">^ <a href="#cite_ref-CSS2_-_Box_model_tweaking_13-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-CSS2_-_Box_model_tweaking_13-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite id="CITEREFKoch" class="citation web cs1">Koch, Peter-Paul. <a rel="nofollow" class="external text" href="https://quirksmode.org/css/user-interface/boxsizing.html">"CSS – box-sizing"</a>. <i>QuirksMode</i><span class="reference-accessdate">. Retrieved <span class="nowrap">26 October</span> 2017</span>.</cite></span>
</li>
<li id="cite_note-RJ1-14"><span class="mw-cite-backlink">^ <a href="#cite_ref-RJ1_14-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-RJ1_14-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite id="CITEREFJohansson2006" class="citation web cs1">Johansson, Roger (21 December 2006). <a rel="nofollow" class="external text" href="http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/">"Internet Explorer and the CSS box model"</a>. <i>456 Berea Street</i><span class="reference-accessdate">. Retrieved <span class="nowrap">26 October</span> 2017</span>.</cite></span>
</li>
<li id="cite_note-15"><span class="mw-cite-backlink"><b><a href="#cite_ref-15">^</a></b></span> <span class="reference-text"><cite id="CITEREFLance_Silver2001" class="citation web cs1">Lance Silver (March 2001). <a rel="nofollow" class="external text" href="http://msdn2.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic3">"CSS Enhancements in Internet Explorer 6"</a>. <i><a href="Microsoft_Developer_Network" title="Microsoft Developer Network">Microsoft Developer Network</a></i>. <a href="Microsoft" title="Microsoft">Microsoft</a><span class="reference-accessdate">. Retrieved <span class="nowrap">24 June</span> 2007</span>.</cite></span>
</li>
<li id="cite_note-16"><span class="mw-cite-backlink"><b><a href="#cite_ref-16">^</a></b></span> <span class="reference-text"><cite id="CITEREFShafer2005" class="citation book cs1">Shafer, Dan (2005). <a rel="nofollow" class="external text" href="https://archive.org/details/htmlutopia000dans/page/124"><i>HTML Utopia: Designing Without Tables Using CSS</i></a>. Melbourne: <a href="Sitepoint" class="mw-redirect" title="Sitepoint">Sitepoint</a>. pp. <a rel="nofollow" class="external text" href="https://archive.org/details/htmlutopia000dans/page/124">124 & Appendix C</a>. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>0-9579218-2-9</bdi>.</cite></span>
</li>
<li id="cite_note-17"><span class="mw-cite-backlink"><b><a href="#cite_ref-17">^</a></b></span> <span class="reference-text"><cite id="CITEREFSheaMolly_E._Holzschlag2005" class="citation book cs1"><a href="Dave_Shea_(web_designer)" title="Dave Shea (web designer)">Shea, David</a>; <a href="Molly_E._Holzschlag" class="mw-redirect" title="Molly E. Holzschlag">Molly E. Holzschlag</a> (2005). <a rel="nofollow" class="external text" href="https://archive.org/details/zenofcssdesignvi00shea"><i>The Zen of CSS Design</i></a>. Berkeley: Peachpit Press. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>0-321-30347-4</bdi>.</cite></span>
</li>
<li id="cite_note-msdn_IE7_blog-18"><span class="mw-cite-backlink">^ <a href="#cite_ref-msdn_IE7_blog_18-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-msdn_IE7_blog_18-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><cite id="CITEREFMarkus_Mielke2006" class="citation web cs1">Markus Mielke (26 September 2006). <a rel="nofollow" class="external text" href="http://msdn2.microsoft.com/en-us/library/bb250496.aspx">"Cascading Style Sheet Compatibility in Internet Explorer 7"</a>. <i><a href="Microsoft_Developer_Network" title="Microsoft Developer Network">Microsoft Developer Network</a></i>. <a href="Microsoft" title="Microsoft">Microsoft</a><span class="reference-accessdate">. Retrieved <span class="nowrap">24 June</span> 2007</span>.</cite> "Pages authored under non-strict mode (quirks) will not change behavior in IE7 and will not be affected by broken CSS filters.Pages authored under non-strict mode (or "quirks mode") will not change behavior in IE7."</span>
</li>
<li id="cite_note-19"><span class="mw-cite-backlink"><b><a href="#cite_ref-19">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx">"!DOCTYPE"</a>. <i><a href="Microsoft_Developer_Network" title="Microsoft Developer Network">Microsoft Developer Network</a></i>. <a href="Microsoft" title="Microsoft">Microsoft</a><span class="reference-accessdate">. Retrieved <span class="nowrap">13 January</span> 2007</span>.</cite> "The following examples show how to use the !DOCTYPE declaration to specify the DTD a document conforms to, and to switch Internet Explorer 6 and later to standards-compliant mode."</span>
</li>
<li id="cite_note-20"><span class="mw-cite-backlink"><b><a href="#cite_ref-20">^</a></b></span> <span class="reference-text"><cite id="CITEREFArve_Bersvendsen2004" class="citation web cs1">Arve Bersvendsen (February 2004). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20070115183512/http://virtuelvis.com/archives/2004/02/css-ie-only">"Hack-free CSS for IE"</a>. <i>Arve Bersvendsen's weblog</i>. Archived from <a rel="nofollow" class="external text" href="http://virtuelvis.com/archives/2004/02/css-ie-only">the original</a> on 15 January 2007<span class="reference-accessdate">. Retrieved <span class="nowrap">16 January</span> 2007</span>.</cite></span>
</li>
<li id="cite_note-21"><span class="mw-cite-backlink"><b><a href="#cite_ref-21">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20100614070042/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/">"Vorsprung durch Webstandards | Douglas Bowman declares his love to CSS"</a>. Vorsprungdurchwebstandards.de. Archived from <a rel="nofollow" class="external text" href="http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/douglas-bowman/">the original</a> on 14 June 2010<span class="reference-accessdate">. Retrieved <span class="nowrap">7 July</span> 2010</span>.</cite></span>
</li>
<li id="cite_note-22"><span class="mw-cite-backlink"><b><a href="#cite_ref-22">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20100227061437/http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/">"Vorsprung durch Webstandards | Peter-Paul Koch declares his love to CSS"</a>. Vorsprungdurchwebstandards.de. Archived from <a rel="nofollow" class="external text" href="http://www.vorsprungdurchwebstandards.de/interviews/fallinginlovewithcss/peter-paul-koch/">the original</a> on 27 February 2010<span class="reference-accessdate">. Retrieved <span class="nowrap">7 July</span> 2010</span>.</cite></span>
</li>
<li id="cite_note-23"><span class="mw-cite-backlink"><b><a href="#cite_ref-23">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20101227135212/http://www.bernzilla.com/item.php?id=33">"Box Model Enlightenment, Bernie Zimmermann"</a>. Bernzilla.com. 4 April 2003. Archived from <a rel="nofollow" class="external text" href="http://www.bernzilla.com/item.php?id=33">the original</a> on 27 December 2010<span class="reference-accessdate">. Retrieved <span class="nowrap">7 July</span> 2010</span>.</cite></span>
</li>
<li id="cite_note-24"><span class="mw-cite-backlink"><b><a href="#cite_ref-24">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/css3-ui/#box-sizing">"CSS3 Basic User Interface Module"</a>. <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a>.</cite></span>
</li>
<li id="cite_note-25"><span class="mw-cite-backlink"><b><a href="#cite_ref-25">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en/CSS/box-sizing">"-moz-box-sizing"</a>. <i><a href="Mozilla_Developer_Center" class="mw-redirect" title="Mozilla Developer Center">Mozilla Developer Center</a></i>. <a href="Mozilla" title="Mozilla">Mozilla</a>. 11 April 2009<span class="reference-accessdate">. Retrieved <span class="nowrap">11 April</span> 2009</span>. <q>It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.</q></cite></span>
</li>
</ol></div></div>
<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>
<ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS21/box.html">The world wide web consortium (W3C) specification of the box model</a></li>
<li><a rel="nofollow" class="external text" href="https://www.w3schools.com/css/css_boxmodel.asp">A tutorial on the CSS box model</a></li>
<li><a rel="nofollow" class="external text" href="http://tantek.com/CSS/Examples/boxmodelhack.html">Tantek Çelik's description of the "box model hack"</a></li>
<li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20061209090244/http://webdesign.about.com/od/css/a/aaboxmodelhack.htm">Getting Internet Explorer to Play Well with CSS</a> – article on about.com that outlines various ways to get around box model problem and other IE bugs.</li>
<li><a rel="nofollow" class="external text" href="http://msdn2.microsoft.com/en-us/library/Bb250496">Cascading Style Sheet Compatibility in Internet Explorer 7</a> – MSDN article, July 2006.</li>
<li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20100103111556/http://renownedmedia.com/blog/css-box-model-differences-in-firefox-and-internet-explorer/">CSS Box Model differences in Firefox and Internet Explorer</a> – Further explanation of the rendering differences between Mozilla Firefox and Internet Explorer.</li></ul>
<div class="navbox-styles"><style data-mw-deduplicate="TemplateStyles:r1236075235">
/* start https://en.wikipedia.org/ */
.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}
/* end https://en.wikipedia.org/ */
</style></div><div role="navigation" class="navbox" aria-labelledby="World_Wide_Web_Consortium_(W3C)102" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="World_Wide_Web_Consortium_(W3C)102" style="font-size:114%;margin:0 4em"><a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C)</div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Products,<br>standards</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="World_Wide_Web_Consortium#W3C_recommendation_(REC)" title="World Wide Web Consortium">Recommendations</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="ActivityPub" title="ActivityPub">ActivityPub</a></li>
<li><a href="Activity_Streams_(format)" title="Activity Streams (format)">Activity Streams</a></li>
<li><a href="WAI-ARIA" title="WAI-ARIA">ARIA</a></li>
<li><a href="Canonical_XML" title="Canonical XML">Canonical XML</a></li>
<li><a href="Compound_Document_Format" title="Compound Document Format">CDF</a></li>
<li><a href="CSS" title="CSS">CSS</a>
<ul><li><a href="CSS_animations" title="CSS animations">Animations</a></li>
<li><a href="Flexbox" title="Flexbox">Flexbox</a></li>
<li><a href="CSS_grid_layout" title="CSS grid layout">Grid</a></li></ul></li>
<li><a href="Document_Object_Model" title="Document Object Model">DOM</a></li>
<li><a href="Efficient_XML_Interchange" title="Efficient XML Interchange">EXI</a></li>
<li><a href="Emotion_Markup_Language" title="Emotion Markup Language">EmotionML</a></li>
<li><a href="W3C_Geolocation_API" title="W3C Geolocation API">Geolocation API</a></li>
<li><a href="HTML" title="HTML">HTML</a>
<ul><li><a href="HTML5" title="HTML5">HTML5</a></li></ul></li>
<li><a href="Indexed_Database_API" title="Indexed Database API">IndexedDB</a></li>
<li><a href="Internationalization_Tag_Set" title="Internationalization Tag Set">ITS</a></li>
<li><a href="JSON-LD" title="JSON-LD">JSON-LD</a></li>
<li><a href="Linked_Data_Notifications" title="Linked Data Notifications">Linked Data Notifications</a></li>
<li><a href="MathML" title="MathML">MathML</a></li>
<li><a href="Micropub_(protocol)" title="Micropub (protocol)">Micropub</a></li>
<li><a href="Web_Ontology_Language" title="Web Ontology Language">OWL</a></li>
<li><a href="Pronunciation_Lexicon_Specification" title="Pronunciation Lexicon Specification">PLS</a></li>
<li><a href="Resource_Description_Framework" title="Resource Description Framework">RDF</a>
<ul><li><a href="RDF_Schema" title="RDF Schema">Schema</a></li>
<li><a href="RDFa" title="RDFa">RDFa</a></li></ul></li>
<li><a href="Semantic_Interpretation_for_Speech_Recognition" title="Semantic Interpretation for Speech Recognition">SISR</a></li>
<li><a href="Simple_Knowledge_Organization_System" title="Simple Knowledge Organization System">SKOS</a></li>
<li><a href="Synchronized_Multimedia_Integration_Language" title="Synchronized Multimedia Integration Language">SMIL</a></li>
<li><a href="SOAP" title="SOAP">SOAP</a></li>
<li><a href="Speech_Recognition_Grammar_Specification" title="Speech Recognition Grammar Specification">SRGS</a></li>
<li><a href="Subresource_Integrity" title="Subresource Integrity">SRI</a></li>
<li><a href="Speech_Synthesis_Markup_Language" title="Speech Synthesis Markup Language">SSML</a></li>
<li><a href="SVG" title="SVG">SVG</a>
<ul><li><a href="SVG_filter_effects" title="SVG filter effects">Filter Effects</a></li></ul></li>
<li><a href="SCXML" title="SCXML">SCXML</a></li>
<li><a href="SHACL" title="SHACL">SHACL</a></li>
<li><a href="SPARQL" title="SPARQL">SPARQL</a></li>
<li><a href="Timed_text" title="Timed text">Timed text</a></li>
<li><a href="VoiceXML" title="VoiceXML">VoiceXML</a></li>
<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a></li>
<li><a href="Web_of_Things" title="Web of Things">WoT</a>
<ul><li><a href="Thing_Description" title="Thing Description">TD</a></li></ul></li>
<li><a href="Web_storage" title="Web storage">Web storage</a></li>
<li><a href="Web_Services_Description_Language" title="Web Services Description Language">WSDL</a></li>
<li><a href="Webmention" title="Webmention">Webmention</a></li>
<li><a href="WebSub" title="WebSub">WebSub</a></li>
<li><a href="WebVTT" title="WebVTT">WebVTT</a></li>
<li><a href="Web_Open_Font_Format" title="Web Open Font Format">WOFF</a></li>
<li><a href="XHTML" title="XHTML">XHTML</a>
<ul><li><a href="XHTML%2BRDFa" title="XHTML+RDFa">+RDFa</a></li></ul></li>
<li><a href="XML" title="XML">XML</a>
<ul><li><a href="XML_Base" title="XML Base">Base</a></li>
<li><a href="XML_Encryption" title="XML Encryption">Encryption</a></li>
<li><a href="XML_Events" title="XML Events">Events</a></li>
<li><a href="XML_Information_Set" title="XML Information Set">Information Set</a></li>
<li><a href="XML_namespace" title="XML namespace">Namespace</a></li>
<li><a href="XML_Schema_(W3C)" title="XML Schema (W3C)">Schema</a></li>
<li><a href="XML_Signature" title="XML Signature">Signature</a></li>
<li><a href="XForms" title="XForms">XForms</a></li>
<li><a href="XInclude" title="XInclude">XInclude</a></li>
<li><a href="XLink" title="XLink">XLink</a></li>
<li><a href="XML-binary_Optimized_Packaging" title="XML-binary Optimized Packaging">XOP</a></li>
<li><a href="XPath" title="XPath">XPath</a>
<ul><li><a href="XPath_2.0" title="XPath 2.0">2.0</a></li>
<li><a href="XPath_3" title="XPath 3">3.x</a></li></ul></li>
<li><a href="XPointer" title="XPointer">XPointer</a></li>
<li><a href="XProc" title="XProc">XProc</a></li>
<li><a href="XQuery" title="XQuery">XQuery</a></li>
<li><a href="XSL" title="XSL">XSL</a></li>
<li><a href="XSL_Formatting_Objects" title="XSL Formatting Objects">XSL-FO</a></li>
<li><a href="XSLT" title="XSLT">XSLT</a>
<ul><li><a href="XSLT_elements" title="XSLT elements">elements</a></li></ul></li></ul></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Notes</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="IndieAuth" title="IndieAuth">IndieAuth</a></li>
<li><a href="XAdES" title="XAdES">XAdES</a></li>
<li><a href="XBL" title="XBL">XBL</a></li>
<li><a href="XHTML%2BSMIL" title="XHTML+SMIL">XHTML+SMIL</a></li>
<li><a href="Extensible_User_Interface_Protocol" title="Extensible User Interface Protocol">XUP</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="World_Wide_Web_Consortium#Working_draft_(WD)" title="World Wide Web Consortium">Working drafts</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Call_Control_eXtensible_Markup_Language" title="Call Control eXtensible Markup Language">CCXML</a></li>
<li><a href="CURIE" title="CURIE">CURIE</a></li>
<li><a href="Encrypted_Media_Extensions" title="Encrypted Media Extensions">EME</a></li>
<li><a href="InkML" title="InkML">InkML</a></li>
<li><a href="Media_Source_Extensions" title="Media Source Extensions">MSE</a></li>
<li><a href="Rule_Interchange_Format" title="Rule Interchange Format">RIF</a></li>
<li><a href="SMIL_Timesheets" title="SMIL Timesheets">SMIL Timesheets</a></li>
<li><a href="SXBL" title="SXBL">sXBL</a></li>
<li><a href="WebGPU" title="WebGPU">WebGPU</a></li>
<li><a href="WebXR" title="WebXR">WebXR</a></li>
<li><a href="Extensible_Forms_Description_Language" title="Extensible Forms Description Language">XFDL</a></li>
<li><a href="XFrames" title="XFrames">XFrames</a></li>
<li><a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Guidelines</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Web_Content_Accessibility_Guidelines" title="Web Content Accessibility Guidelines">Web Content Accessibility Guidelines</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Initiative</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="W3C_Markup_Validation_Service" title="W3C Markup Validation Service">Markup Validation Service</a></li>
<li><a href="Web_Accessibility_Initiative" title="Web Accessibility Initiative">Web Accessibility Initiative</a></li>
<li><a href="Web_Components" title="Web Components">Web Components</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Deprecated</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="C-HTML" class="mw-redirect" title="C-HTML">C-HTML</a></li>
<li><a href="Handheld_Device_Markup_Language" title="Handheld Device Markup Language">HDML</a></li>
<li><a href="JavaScript_Style_Sheets" title="JavaScript Style Sheets">JSSS</a></li>
<li><a href="Precision_Graphics_Markup_Language" title="Precision Graphics Markup Language">PGML</a></li>
<li><a href="Vector_Markup_Language" title="Vector Markup Language">VML</a></li>
<li><a href="WebPlatform.org" title="WebPlatform.org">WebPlatform</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Obsoleted</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="P3P" title="P3P">P3P</a></li>
<li><a href="XHTML%2BMathML%2BSVG" title="XHTML+MathML+SVG">XHTML+MathML+SVG</a></li></ul>
</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Groups,<br>organizations</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td colspan="2" class="navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="WHATWG" title="WHATWG">WHATWG</a></li>
<li>Defunct: <a href="World_Wide_Web_Foundation" title="World Wide Web Foundation">World Wide Web Foundation</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Elected</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li>AB</li>
<li>Board</li>
<li><a href="Technical_Architecture_Group" title="Technical Architecture Group">TAG</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Working</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="CSS_Working_Group" title="CSS Working Group">CSS</a></li>
<li><a href="SVG_Working_Group" title="SVG Working Group">SVG</a></li>
<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a></li>
<li><a href="Web_Authentication_Working_Group" title="Web Authentication Working Group">WebAuthn</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Community, business</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Improving_Web_Advertising_Business_Group" title="Improving Web Advertising Business Group">Web Advertising BG</a></li>
<li><a href="WebAssembly" title="WebAssembly">WebAssembly</a> CG</li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Closed</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="W3C_Device_Description_Working_Group" title="W3C Device Description Working Group">Device Description</a> (DDWG)</li>
<li><a href="HTML_Working_Group" title="HTML Working Group">HTML</a></li>
<li><a href="W3C_MMI" title="W3C MMI">Multimodal Interaction Activity</a> (MMI)</li></ul>
</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Software</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="CERN_httpd" title="CERN httpd">CERN httpd</a></li>
<li><a href="Libwww" title="Libwww">Libwww</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Web_browser" title="Web browser">Browsers</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="Line_Mode_Browser" title="Line Mode Browser">Line Mode</a> (1990–)</li>
<li><a href="Arena_(web_browser)" title="Arena (web browser)">Arena</a> (1993–98)</li>
<li><a href="Agora_(web_browser)" title="Agora (web browser)">Agora</a> (1994–97)</li>
<li><a href="Argo_(web_browser)" title="Argo (web browser)">Argo</a> (1994–97)</li>
<li><a href="Amaya_(web_editor)" title="Amaya (web editor)">Amaya</a> (browser/editor, 1996–2012)</li></ul>
</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Conferences</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em">
<ul><li><a href="The_Web_Conference" title="The Web Conference">International World Wide Web Conference</a> (IW3C)
<ul><li><a href="International_World_Wide_Web_Conference_Committee" title="International World Wide Web Conference Committee">Steering Committee</a> (IW3C2)</li>
<li><a href="First_International_Conference_on_the_World-Wide_Web" title="First International Conference on the World-Wide Web">First conference</a> ("WWW1", 1994)</li></ul></li></ul>
</div></td></tr></tbody></table></div></div><!--htdig_noindex--><div><div class="zim-footer">
This article is issued from <a class="external text" title="Last edited on 2025-06-12" href="https://en.wikipedia.org/wiki/?title=CSS_box_model&oldid=1295215947">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
</body></html>